import { useState, useEffect, useLayoutEffect } from 'react';
import UseEffectChild from './useEffectChild';
const DemoEffect = () => {
    
    const [count, setCount] = useState(0);
    const updateCount = () => {
        setCount(count + 1)
        // console.log('获取到更新后的count', count)
    }
    /**
    * 1. 可以获取更新后的状态
    */
    // useEffect(() => {
    //     console.log('useEffect', count) // 可以获取到最新的count
    // }, []) // 第二个参数为空数组，代表只初始化执行一次，后续的状态更新全部不执行
    
    // 2. 实现生命周期的顺序(模拟)
    // useEffect(() => {
    //     console.log('父组件useEffect-mounted') 
    //     return () => {
    //         console.log('父组件useEffect-unmount') 
    //     }
    // }) 
    
    // 3. 添加依赖-> 给effect钩子函数添加第二个参数（某个状态）
    useEffect(() => {
     console.log('useEffect count更新了第一个effect', count)
     // 初始值2
    }, [count])
    
    // 4.新的钩子 useLayoutEffect优先级高于useEffect ，并且layout是同步的
    useLayoutEffect(() => { 
      // 初始值1
       console.log('useLayoutEffect111')
    })
    
    useLayoutEffect(() => { 
        // 初始值1
         console.log('useLayoutEffect222')
      })
    useEffect(() => {
        console.log('useEffect第二个effect', count)
        // 初始值3
       }, [count])
    // 5. 多个useEffect的执行顺序（按代码的定义位置执行）和 多个useLayoutEffect也是按代码的定位顺序执行的
    
    return ( <div>
       <h2>useEffect</h2>
       <pre>
       useEffect 可以传入2个参数，第1个参数为我们定义的执行函数，第2个参数是依赖关系(可选参数)。若一个函数组件中定义了多个useEffect，那么他们实际执行顺序是按照在代码中定义的先后顺序来执行的。
第一个参数中的代码是组件挂载和更新就会执行的代码。<br/>
return 出去的代码会在组件卸载时才会执行。<br />
依赖数组不是必填项，如果不传则每次渲染都会去执行，传值的话在依赖项发生改变时函数中的代码才会执行，如果传空数组则会在组件第一次挂载才会执行。
       </pre>
       count: {count}
       {
         count === 0 ? <UseEffectChild /> : null
       }
       <button onClick={updateCount}>更新count+1</button>
       
    </div> );
}
 
export default DemoEffect;